<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
	<script type="text/javascript" th:src="@{/mylayer.js}"></script>
	<title>确认订单</title>
</head>
<body>
	<!-- 顶部tab -->
	<div th:replace="fragments/common::top-tab"></div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" th:href="@{/}"><img th:src="@{/images/icons/whlogo.png}" alt="商场" class="cover"></a>
				<div class="title">确认订单</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车-确认订单 </div>
				<div class="shop-title">收货地址</div>
				<form action="" class="shopcart-form__box">
					<div class="addr-radio">
						<div class="radio-line radio-box addr" th:each="address:${addressList}">
							<label class="radio-label ep link" th:utext='|<input name="addr" checked=""  autocomplete="off" type="radio" value=${address.id}>${address.province?:""} ${address.city?:""} ${address.area?:""} (${address.name?:""} 收) ${address.phone?:""}|'>
							</label>
						</div>
					</div>
					<div class="add_addr"><a class="link" id="addNewAddress">添加新地址</a></div>
					<div class="shop-title">所选商品</div>
					<div class="shop-order__detail">
						<table class="table">
							<thead>
								<tr>
									<th width="120"></th>
									<th width="300">商品信息</th>
									<th width="150">单价</th>
									<th width="200">数量</th>
									<th width="200">运费</th>
									<th width="80">总价</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="cart:${cartVOList}">
									<th scope="row"><a th:href="|${#request.getContextPath()}/product/getProductDetailPage?id=${cart.productId}|"><div class="img"><img th:src="${cart.getProductMainImage()}" th:alt="${cart.productName}" class="cover"></div></a></th>
									<td>
										<div class="name ep3" th:text="${cart.productName}"></div>
										<div class="type c9">颜色分类：深棕色  尺码：均码</div>
									</td>
									<td th:text="'￥'+${cart.getProductPrice()}"></td>
									<td th:text="${cart.getQuantity()}"></td>
									<td>¥0.0</td>
									<td th:text="'￥'+${cart.getQuantity()*cart.getProductPrice()}"></td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="shop-cart__info clearfix">
						<div class="pull-right text-right">
							<div class="info-line">运费：<span class="c6">¥0.00</span></div>
							<div class="info-line">合计：<b class="fz18 cr" th:text="'￥'+${total}"></b></div>
						</div>
					</div>
					<div class="shop-title">支付方式</div>
					<div class="pay-mode__box">
						<div class="radio-line radio-box pay active">
							<label class="radio-label ep">
								<input class="payWay" name="pay-mode" value="1" autocomplete="off" type="radio" checked><i class="iconfont icon-radio"></i>
								<img th:src="@{/images/icons/alipay.png}" alt="支付宝支付">
							</label>
							<div class="pay-value">支付<b class="fz16 cr" th:text="${total}"></b>元</div>
						</div>
						<div class="radio-line radio-box pay">
							<label class="radio-label ep">
								<input class="payWay" name="pay-mode" value="2" autocomplete="off" type="radio"><i class="iconfont icon-radio"></i>
								<img th:src="@{/images/icons/paywechat.png}" alt="微信支付">
							</label>
							<div class="pay-value">支付<b class="fz16 cr" th:text="${total}"></b>元</div>
						</div>
					</div>
					<div class="user-form-group shopcart-submit">
						<button type="button" class="btn" id="addOrder">提交订单</button>
					</div>
					<script>
						$(document).ready(function(){
							$(".radio-line:first").addClass("active");
							$(this).on('change','input',function() {
								$(this).parents('.radio-box').addClass('active').siblings().removeClass('active');
							})
						});
					</script>
				</form>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div th:replace="fragments/common::right-menu"></div>
	<!-- 底部信息 -->
	<div th:replace="fragments/common::bottom-bar"></div>
</body>
<script th:inline="javascript">
	$('#addNewAddress').click(function (){
		var loc=[[${#request.getContextPath()}]]+"/user/getUserAddressPage"
		console.log(loc);
		layer.open({
			type: 2,
			title: '添加地址',
			area: ['65%', '80%'],
			content: loc,
			cancel: function(){
				location.reload();
			}
		});
	})

	$('#addOrder').click(function (){
		var addressParent = $("div.radio-line.radio-box.addr.active");
		var addressSel=addressParent.find("input");
		var addressId=addressSel.val();
		var selectedPay = $("input.payWay:checked");
		var payId=selectedPay.val();
		$.post(
				[[${#request.getContextPath()}]]+'/order/add',
			{'shippingId': addressId, 'paymentType':payId},
			function(result) {
				if (result.ok) {
					mylayer.okUrl(result.msg,[[${#request.getContextPath()}]]+'/getOrderCenterPage');
				} else {
					mylayer.errorMsg(result.msg);
				}
			},
			'json'
		);
	})
	$('.link').css("cursor", "pointer");
</script>
</html>